<template>
  <div class="divider-demo" :style="`max-width: ${maxWidth}`">
    <div class="divider-demo-text">{{ content }}</div>
  </div>
</template>

<script>
export default {
  name: "DividerDemo",
  components: {},
  props: {
    content: {
      type: String,
      default: "With Text",
    },
    maxWidth: {
      type: String,
      default: "1000px",
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.divider-demo {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  justify-content: center;
  border-block-start: 0 rgba(5, 5, 5, 0.06);
  flex: 1;

  &-text {
    // display: inline-block;
    // padding: 0 1em;
    color: var(--text---color-text-caption, rgba(0, 11, 52, 0.41));
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    /* 133.333% */

    border-radius: var(--radius-large);
    border: var(--border-thickness) solid var(--color-divider-normal);
    background: var(--color-bg-1);

    display: flex;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
  }

  &::before {
    position: relative;
    width: 50%;
    border-block-start: 1px solid transparent;
    border-block-start-color: inherit;
    border-block-end: 0;
    transform: translateY(50%);
    content: "";
  }

  &::after {
    position: relative;
    width: 50%;
    border-block-start: 1px solid transparent;
    border-block-start-color: inherit;
    border-block-end: 0;
    transform: translateY(50%);
    content: "";
  }
}
</style>
